<template>
  <HeaderMain></HeaderMain>
  <RouterView />
  <FooterMain></FooterMain>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import { RouterView } from 'vue-router';

import { useAppStore } from '@/stores/app';

const appStore = useAppStore();

onMounted(async () => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  if (mediaQuery.matches) {
    appStore.changeTheme('dark');
  } else {
    appStore.changeTheme('light');
  }
});
</script>

<style lang="scss" scoped></style>
